<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Jay Skript And The Domsters: Tour dates</title>
  <link rel="stylesheet" type="text/css" media="screen" href="css/layout.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    #content{width:960px;margin:0 auto;}
    .main{float:right;width:750px;}
    .side{float:left;width:200px;}
    .letters .hd{margin-bottom:10px;} 
    .letters h2,.letters h3{font-weight:700;font-size:14px;}
    .letter{margin-bottom:5px;} 
    .letter .button{border:2px solid #ccc; width:100px;text-align:center;}
  </style>
</head>
<body>
  <div id="content" class="clearfix">
    <div class="side">
      <div class="letters">
        <div class="hd">
          <h2>The Devil's Dictionary</h2>
          <p>by Ambrose Blerose</p>
        </div>
        <div class="letter" id="letter-a">
          <h3>A</h3>
          <div class="button">Load</div>
        </div>
        <div class="letter" id="letter-b">
          <h3>B</h3>
          <div class="button">Load</div>
        </div>
        <div class="letter" id="letter-c">
          <h3>C</h3>
          <div class="button">Load</div>
        </div>
        <div class="letter" id="letter-d">
          <h3>D</h3>
          <div class="button">Load</div>
        </div>                        
      </div>
    </div>
    <div class="main">
      <div id="dictionary">
      </div>
    </div>
  </div>
<script>  
  $(function(){
    $('#letter-a .button').click(function(){
      $('#dictionary').load('a.html');
    });
    $('#letter-b .button').click(function(){
      $.getJSON('b.json',function(data){
        $('#dictionary').empty();
        $.each(data,function(entryIndex,entry){
          var html = '<div class="entry">';
          html += '<h3 class="term">' + entry['term'] + '</h3>';
          $('#dictionary').append(html);
        })  
      });
    });   
  })
</script>

</body>
</html>